<template>
  <div class="feedback">
    <div class="page-header">
      <h2>反馈与建议</h2>
      <p>您的意见和建议对我们非常重要</p>
    </div>

    <!-- 反馈统计 -->
    <div class="feedback-stats">
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ feedbackStats.total }}</div>
          <div class="stat-label">已提交反馈</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ feedbackStats.replied }}</div>
          <div class="stat-label">已回复</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
          </svg>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ feedbackStats.rating }}</div>
          <div class="stat-label">满意度评分</div>
        </div>
      </div>
    </div>

    <!-- 新建反馈 -->
    <div class="feedback-form-section">
      <div class="section-header">
        <h3>提交反馈</h3>
        <div class="feedback-types">
          <button 
            v-for="type in feedbackTypes" 
            :key="type.key"
            class="type-btn"
            :class="{ active: selectedType === type.key }"
            @click="selectedType = type.key"
          >
            <component :is="type.icon" />
            {{ type.label }}
          </button>
        </div>
      </div>

      <div class="feedback-form">
        <div class="form-group">
          <label>反馈标题</label>
          <input 
            type="text" 
            v-model="feedbackForm.title" 
            placeholder="请简要描述您的反馈内容"
            maxlength="100"
          />
          <div class="char-count">{{ feedbackForm.title.length }}/100</div>
        </div>

        <div class="form-group">
          <label>详细描述</label>
          <textarea 
            v-model="feedbackForm.description" 
            placeholder="请详细描述您的问题、建议或意见..."
            rows="6"
            maxlength="500"
          ></textarea>
          <div class="char-count">{{ feedbackForm.description.length }}/500</div>
        </div>

        <div class="form-group" v-if="selectedType === 'bug'">
          <label>重现步骤</label>
          <textarea 
            v-model="feedbackForm.steps" 
            placeholder="请描述问题的重现步骤..."
            rows="4"
            maxlength="300"
          ></textarea>
          <div class="char-count">{{ feedbackForm.steps.length }}/300</div>
        </div>

        <div class="form-group" v-if="selectedType === 'suggestion'">
          <label>期望结果</label>
          <textarea 
            v-model="feedbackForm.expectedResult" 
            placeholder="请描述您期望的功能或改进..."
            rows="4"
            maxlength="300"
          ></textarea>
          <div class="char-count">{{ feedbackForm.expectedResult.length }}/300</div>
        </div>

        <div class="form-group">
          <label>优先级</label>
          <select v-model="feedbackForm.priority">
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
            <option value="urgent">紧急</option>
          </select>
        </div>

        <div class="form-group">
          <label>相关截图或文件</label>
          <div class="file-upload">
            <input 
              type="file" 
              ref="fileInput"
              @change="handleFileUpload"
              multiple
              accept="image/*,.pdf,.doc,.docx"
              style="display: none"
            />
            <button class="upload-btn" @click="$refs.fileInput.click()">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17,8 12,3 7,8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
              </svg>
              选择文件
            </button>
            <div class="file-list">
              <div 
                v-for="file in feedbackForm.files" 
                :key="file.id"
                class="file-item"
              >
                <span class="file-name">{{ file.name }}</span>
                <button class="remove-file" @click="removeFile(file.id)">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M18 6L6 18"/>
                    <path d="M6 6l12 12"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>联系方式（可选）</label>
          <input 
            type="text" 
            v-model="feedbackForm.contact" 
            placeholder="如需回复，请留下您的联系方式"
          />
        </div>

        <div class="form-actions">
          <button class="btn btn-secondary" @click="resetForm">重置</button>
          <button class="btn btn-primary" @click="submitFeedback">提交反馈</button>
        </div>
      </div>
    </div>

    <!-- 我的反馈历史 -->
    <div class="feedback-history-section">
      <div class="section-header">
        <h3>我的反馈历史</h3>
        <div class="filter-controls">
          <select v-model="historyFilter" @change="filterHistory">
            <option value="all">全部状态</option>
            <option value="pending">待处理</option>
            <option value="processing">处理中</option>
            <option value="resolved">已解决</option>
            <option value="closed">已关闭</option>
          </select>
          <button class="btn btn-text" @click="refreshHistory">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M23 4v6h-6"/>
              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
            </svg>
            刷新
          </button>
        </div>
      </div>

      <div class="feedback-list">
        <div 
          v-for="feedback in filteredFeedbackHistory" 
          :key="feedback.id"
          class="feedback-item"
        >
          <div class="feedback-header">
            <div class="feedback-title">{{ feedback.title }}</div>
            <div class="feedback-meta">
              <span class="feedback-type">{{ getTypeLabel(feedback.type) }}</span>
              <span class="feedback-status" :class="feedback.status">
                {{ getStatusLabel(feedback.status) }}
              </span>
            </div>
          </div>
          
          <div class="feedback-content">
            <div class="feedback-description">{{ feedback.description }}</div>
            <div class="feedback-info">
              <span class="feedback-date">提交时间：{{ formatDate(feedback.createdAt) }}</span>
              <span class="feedback-priority" :class="feedback.priority">
                优先级：{{ getPriorityLabel(feedback.priority) }}
              </span>
            </div>
          </div>
          
          <div class="feedback-actions">
            <button class="btn btn-link" @click="viewFeedbackDetail(feedback)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
              查看详情
            </button>
            <button 
              class="btn btn-link" 
              @click="editFeedback(feedback)"
              v-if="feedback.status === 'pending'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
              </svg>
              编辑
            </button>
            <button 
              class="btn btn-link" 
              @click="deleteFeedback(feedback)"
              v-if="feedback.status === 'pending'"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 6h18"/>
                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
                <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
              </svg>
              删除
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 常见问题 -->
    <div class="faq-section">
      <div class="section-header">
        <h3>常见问题</h3>
        <button class="btn btn-text" @click="expandAllFaq">
          {{ allFaqExpanded ? '收起全部' : '展开全部' }}
        </button>
      </div>

      <div class="faq-list">
        <div 
          v-for="faq in faqList" 
          :key="faq.id"
          class="faq-item"
          :class="{ expanded: faq.expanded }"
        >
          <div class="faq-question" @click="toggleFaq(faq)">
            <span>{{ faq.question }}</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M6 9l6 6 6-6"/>
            </svg>
          </div>
          <div class="faq-answer" v-if="faq.expanded">
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 反馈统计
const feedbackStats = ref({
  total: 8,
  replied: 5,
  rating: 4.7
})

// 反馈类型
const feedbackTypes = [
  {
    key: 'bug',
    label: '问题报告',
    icon: 'BugIcon'
  },
  {
    key: 'suggestion',
    label: '功能建议',
    icon: 'LightbulbIcon'
  },
  {
    key: 'complaint',
    label: '投诉建议',
    icon: 'MessageIcon'
  },
  {
    key: 'other',
    label: '其他',
    icon: 'QuestionIcon'
  }
]

// 选中的反馈类型
const selectedType = ref('bug')

// 反馈表单
const feedbackForm = reactive({
  title: '',
  description: '',
  steps: '',
  expectedResult: '',
  priority: 'medium',
  files: [],
  contact: ''
})

// 反馈历史筛选
const historyFilter = ref('all')

// 反馈历史数据
const feedbackHistory = ref([
  {
    id: 1,
    title: '检测结果显示异常',
    description: '在使用图像检测功能时，结果显示不正确',
    type: 'bug',
    status: 'resolved',
    priority: 'high',
    createdAt: '2024-01-15 14:30:00',
    updatedAt: '2024-01-16 10:15:00'
  },
  {
    id: 2,
    title: '希望增加批量检测功能',
    description: '建议增加批量上传和检测多个文件的功能',
    type: 'suggestion',
    status: 'processing',
    priority: 'medium',
    createdAt: '2024-01-14 09:20:00',
    updatedAt: '2024-01-14 09:20:00'
  },
  {
    id: 3,
    title: '页面加载速度较慢',
    description: '在网络良好的情况下，页面加载仍然较慢',
    type: 'complaint',
    status: 'pending',
    priority: 'low',
    createdAt: '2024-01-13 16:45:00',
    updatedAt: '2024-01-13 16:45:00'
  }
])

// 过滤后的反馈历史
const filteredFeedbackHistory = computed(() => {
  if (historyFilter.value === 'all') {
    return feedbackHistory.value
  }
  return feedbackHistory.value.filter(feedback => feedback.status === historyFilter.value)
})

// 常见问题
const faqList = ref([
  {
    id: 1,
    question: '如何提交反馈？',
    answer: '您可以在本页面的"提交反馈"区域选择反馈类型，填写相关信息并提交。我们会在24小时内处理您的反馈。',
    expanded: false
  },
  {
    id: 2,
    question: '反馈处理需要多长时间？',
    answer: '一般反馈会在1-3个工作日内处理完成，紧急问题会在24小时内优先处理。',
    expanded: false
  },
  {
    id: 3,
    question: '如何查看反馈处理进度？',
    answer: '您可以在"我的反馈历史"中查看所有反馈的处理状态和进度。',
    expanded: false
  },
  {
    id: 4,
    question: '可以上传什么类型的文件？',
    answer: '支持上传图片（jpg、png、gif）、PDF文档、Word文档等常见格式，单个文件大小不超过10MB。',
    expanded: false
  }
])

// 所有FAQ是否展开
const allFaqExpanded = computed(() => {
  return faqList.value.every(faq => faq.expanded)
})

// 处理文件上传
const handleFileUpload = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    if (file.size > 10 * 1024 * 1024) {
      alert('文件大小不能超过10MB')
      return
    }
    
    feedbackForm.files.push({
      id: Date.now() + Math.random(),
      name: file.name,
      file: file
    })
  })
}

// 删除文件
const removeFile = (fileId) => {
  feedbackForm.files = feedbackForm.files.filter(file => file.id !== fileId)
}

// 重置表单
const resetForm = () => {
  Object.assign(feedbackForm, {
    title: '',
    description: '',
    steps: '',
    expectedResult: '',
    priority: 'medium',
    files: [],
    contact: ''
  })
}

// 提交反馈
const submitFeedback = () => {
  if (!feedbackForm.title.trim()) {
    alert('请输入反馈标题')
    return
  }
  
  if (!feedbackForm.description.trim()) {
    alert('请输入详细描述')
    return
  }
  
  // 这里应该调用API提交反馈
  const newFeedback = {
    id: Date.now(),
    title: feedbackForm.title,
    description: feedbackForm.description,
    type: selectedType.value,
    status: 'pending',
    priority: feedbackForm.priority,
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString()
  }
  
  feedbackHistory.value.unshift(newFeedback)
  resetForm()
  alert('反馈提交成功')
}

// 筛选反馈历史
const filterHistory = () => {
  // 筛选逻辑已在计算属性中实现
}

// 刷新历史记录
const refreshHistory = () => {
  console.log('刷新历史记录')
  // 这里应该调用API刷新数据
}

// 查看反馈详情
const viewFeedbackDetail = (feedback) => {
  console.log('查看反馈详情:', feedback)
  // 这里应该打开详情对话框或跳转到详情页
}

// 编辑反馈
const editFeedback = (feedback) => {
  console.log('编辑反馈:', feedback)
  // 这里应该打开编辑对话框
}

// 删除反馈
const deleteFeedback = (feedback) => {
  if (confirm('确定要删除这条反馈吗？')) {
    feedbackHistory.value = feedbackHistory.value.filter(f => f.id !== feedback.id)
  }
}

// 切换FAQ展开状态
const toggleFaq = (faq) => {
  faq.expanded = !faq.expanded
}

// 展开/收起所有FAQ
const expandAllFaq = () => {
  const shouldExpand = !allFaqExpanded.value
  faqList.value.forEach(faq => {
    faq.expanded = shouldExpand
  })
}

// 获取类型标签
const getTypeLabel = (type) => {
  const labels = {
    bug: '问题报告',
    suggestion: '功能建议',
    complaint: '投诉建议',
    other: '其他'
  }
  return labels[type] || type
}

// 获取状态标签
const getStatusLabel = (status) => {
  const labels = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return labels[status] || status
}

// 获取优先级标签
const getPriorityLabel = (priority) => {
  const labels = {
    low: '低',
    medium: '中',
    high: '高',
    urgent: '紧急'
  }
  return labels[priority] || priority
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.feedback {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 反馈统计 */
.feedback-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1e3c72, #2d4a87);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #1e3c72;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

/* 设置区域 */
.feedback-form-section,
.feedback-history-section,
.faq-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

/* 反馈类型选择 */
.feedback-types {
  display: flex;
  gap: 8px;
}

.type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 2px solid #e9e9e9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.type-btn.active {
  border-color: #1e3c72;
  background: #1e3c72;
  color: white;
}

/* 表单样式 */
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 2px solid #e9e9e9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1e3c72;
}

.char-count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  color: #999;
}

/* 文件上传 */
.file-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 2px dashed #e9e9e9;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;
  width: fit-content;
}

.upload-btn:hover {
  border-color: #1e3c72;
  color: #1e3c72;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.file-name {
  font-size: 14px;
  color: #333;
}

.remove-file {
  padding: 4px;
  border: none;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.remove-file:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
}

.btn-link {
  background: transparent;
  color: #1e3c72;
  padding: 4px;
}

.btn:hover {
  opacity: 0.9;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 筛选控件 */
.filter-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-controls select {
  padding: 8px 12px;
  border: 2px solid #e9e9e9;
  border-radius: 6px;
  font-size: 14px;
}

/* 反馈列表 */
.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-item {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.feedback-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.feedback-meta {
  display: flex;
  gap: 8px;
}

.feedback-type {
  padding: 4px 8px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
  font-size: 12px;
}

.feedback-status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.feedback-status.pending {
  background: #fff3e0;
  color: #f57c00;
}

.feedback-status.processing {
  background: #e3f2fd;
  color: #1976d2;
}

.feedback-status.resolved {
  background: #e8f5e8;
  color: #388e3c;
}

.feedback-status.closed {
  background: #f5f5f5;
  color: #666;
}

.feedback-content {
  margin-bottom: 16px;
}

.feedback-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 8px;
}

.feedback-info {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.feedback-priority {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.feedback-priority.low {
  background: #e8f5e8;
  color: #388e3c;
}

.feedback-priority.medium {
  background: #fff3e0;
  color: #f57c00;
}

.feedback-priority.high {
  background: #ffebee;
  color: #d32f2f;
}

.feedback-priority.urgent {
  background: #f3e5f5;
  color: #7b1fa2;
}

.feedback-actions {
  display: flex;
  gap: 12px;
}

/* FAQ样式 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.2s;
}

.faq-question:hover {
  background: #e9e9e9;
}

.faq-item.expanded .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 16px;
  background: white;
  border-top: 1px solid #e9e9e9;
}

.faq-answer p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feedback {
    padding: 16px;
  }
  
  .feedback-stats {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .feedback-types {
    flex-wrap: wrap;
  }
  
  .feedback-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .feedback-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .form-actions {
    justify-content: center;
  }
}
</style> 